<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
			//http://116.63.89.27:83/gxzy.asmx/GetAllRoomIndex
			mui.ajax('http://116.63.89.27:83/gxzy.asmx/GetAllRoomIndex', {
				data: {
					"schoolno": "20191030"
				},
				dataType: 'text', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				//headers:{'Content-Type':'application/json'},	              
				success: function(data) {
					var json = eval('(' + data + ')');
					//console.log(json);
					//var ulli = document.createElement('li');
					//console.log(ulli);
					mui.each(json.Result, function(index, item) {
						//console.log(item.RoomStatus);
						//var li = mui('#li')[0];
						let li = document.createElement('li');
						// var ii = '\''+mui("#li")[0]+'\'';
						li.innerHTML =
							'<li class="mui-table-view-cell mui-collapse">' +
							'<a class="mui-navigate-right" href="#">' + item.LibraryName + '</a>' +
							'<div class="mui-collapse-content">' +
							'<ul class="mui-table-view">' +

							'</ul>' +
							'</div>' +
							'</li>'
						//li.className = "mui-table-view-cell mui-collapse";
						mui("#ul")[0].appendChild(li);
						mui.each(item.RoomStatus, function(ind, it) {
							//console.log(it)
							let li = document.createElement('li');
							li.innerHTML =
								'<li class="mui-table-view-cell">' +
								'<a class="mui-navigate-right">' +
								'<h4>' + it.RoomName + '</h4>' +
								'<div class="info">' +
								'<span>座位总数:' + it.SeatAmount_All + '</span>' +
								'<span>已使用:' + it.SeatAmount_Used + '</span>' +
								'<span>剩余:' + it.SeatAmount_Last + '</span>' +
								'</div>' +
								'</a>' +
								'</li>'
							mui("#ul ul")[index].appendChild(li);
							li.addEventListener("tap", function() {
								//console.log("点击");
								mui.openWindow({
									url: 'order.html',
									extras: {
										RoomNo: it.RoomNo
									},
								});
							});
						})
					})
					//

					// var li = document.createElement('li')
					// 					li.className = "mui-table-view-cell mui-collapse";
					// 					mui("#list")[0].appendChild(li);
					// 					// list.appendChild(li);

					// 					var a = document.createElement('a')
					// 					a.className = "mui-navigate-right";
					// 					a.innerHTML = data.LibraryName;
					// 					li.appendChild(a);
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					console.log(type);
				}
			});
		</script>
		<style type="text/css">
			.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell {
				background-color: WhiteSmoke;
				margin: 10px 15px;
				padding: 10px;
				border-radius: 10px;
			}

			.mui-table-view-cell>a:not(.mui-btn) {
				margin: 0;
				padding: 0;

			}

			.mui-navigate-right:after,
			.mui-push-right:after {
				right: 0;
			}

			.mui-table-view-cell.mui-collapse.mui-active .mui-table-view-cell>a:not(.mui-btn).mui-active {
				margin-left: 0;
				padding-left: 0;
				background: none;
			}

			.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after {
				opacity: 0;
			}

			.info {
				font-size: 0.75rem;
			}

			.info span {
				margin-right: 10px;
			}

			.mui-table-view .mui-table-view-cell .mui-navigate-right h4 {
				margin-bottom: 0.625rem;
				width: 300px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<ul class="mui-table-view" id="ul">

		</ul>
		<!-- <li class="mui-table-view-cell mui-collapse" id="li">
		<a class="mui-navigate-right" href="#">item.LibraryName</a>
		<div class="mui-collapse-content">
		<ul class="mui-table-view">
		<li class="mui-table-view-cell">
		<a class="mui-navigate-right">
		<h4>测试阅览室</h4>
		<div class="info">
		<span>座位总数:0</span>
		<span>已使用:0</span>
		<span>剩余:0</span>
		</div>
		</a>
		</li>
		</ul>
		</div>
		</li> -->
	</body>
</html>
